<template>
  <div>
    <div class="tabNav">
      <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
      </router-link>
      <b
        >/<i
          style="font-size: 16px; margin-right: 5px"
          class="el-icon-s-tools"
        ></i
        >账户设置</b
      >
    </div>
    <div class="register">
      <div class="registerCon setting">
        <p>账户设置</p>
        <el-form
          v-if="Object.keys(ruleForm).length > 0"
          :model="ruleForm"
          ref="ruleForm"
          class="demo-ruleForm"
          label-width="140px"
        >
          <el-form-item label="平台ID">
            <el-input disabled v-model="ruleForm.platformId"></el-input>
          </el-form-item>
          <el-form-item label="平台名称">
            <el-input disabled v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="平台联系人">
            <el-input disabled v-model="ruleForm.linkManName"></el-input>
          </el-form-item>
          <el-form-item label="法人姓名">
            <el-input disabled v-model="ruleForm.legalName"></el-input>
          </el-form-item>
          <el-form-item label="平台银行名称">
            <el-input disabled v-model="ruleForm.bankName"></el-input>
          </el-form-item>
          <el-form-item label="平台银行账号">
            <el-input disabled v-model="ruleForm.bankNo"></el-input>
          </el-form-item>
          <el-form-item label="灵工平台网址">
            <el-input disabled v-model="ruleForm.platformUrl"></el-input>
          </el-form-item>
          <el-form-item label="企业端网址">
            <el-input disabled v-model="ruleForm.businessUrl"></el-input>
          </el-form-item>
          <el-form-item label="用户端H5地址">
            <el-input disabled v-model="ruleForm.webUrl"></el-input>
          </el-form-item>
          <!-- <el-form-item label="是否自动审批" prop="selfMode">
            <el-select
              v-model="ruleForm.showEsign"
              placeholder="请选择"
              :disabled="detailsFlag"
            >
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item class="contactsPic" label="平台logo" prop="logo">
            <el-input v-model="ruleForm.logoUrl"></el-input>
            <div class="upload-images">
              <el-upload
                action="#"
                list-type="picture-card"
                :multiple="false"
                :show-file-list="false"
                :limit="1"
                :auto-upload="true"
                :http-request="uploadFileLogo"
                ref="uploadImage"
              >
                <img v-if="ruleForm.logoUrl" :src="ruleForm.logoUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="upload-images-icon">编辑</div>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="修改密码" prop="creditCode">
            <div class="image-box">
              <b @click="vocationalWork()">修改密码</b>
            </div>
          </el-form-item>
          <!-- <el-form-item label="线上发薪配置" prop="creditCode">
            <div class="image-box">
              <b @click="vocationalBank()">线上发薪配置</b>
            </div>
          </el-form-item> -->
        </el-form>
        <el-dialog
          title="线上发薪配置"
          v-model="vocationalBankShow"
          custom-class="examine-style"
          width="50%"
        >
          <div class="modifyPassword">
            <el-form
              ref="formPasswords"
              class="demo-ruleForm"
              label-width="140px"
              :model="ruleForms"
              :rules="rules"
            >
              <el-form-item label="平台开户行">
                <el-input disabled v-model="ruleForms.bankName"></el-input>
              </el-form-item>
              <el-form-item label="平台银行账号" prop="bankNo">
                <el-input  v-model="ruleForms.bankNo"></el-input>
              </el-form-item>
              <el-form-item label="平台开户地" prop="bankAdress">
                <el-input v-model="ruleForms.bankAdress"></el-input>
              </el-form-item>
              <el-form-item label="授权方开户行">
                <el-input disabled v-model="ruleForms.authBankName"></el-input>
              </el-form-item>
              <el-form-item label="授权方银行账号" prop="authBankNo">
                <el-input v-model="ruleForms.authBankNo"></el-input>
              </el-form-item>
              <el-form-item label="授权方开户地" prop="authBankAdress">
                <el-input v-model="ruleForms.authBankAdress"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="vocationalBankShow = false">取 消</el-button>
              <el-button type="primary" @click="configBank()">确 定</el-button>
            </span>
          </template>
        </el-dialog>
        <el-dialog
          title="修改密码"
          v-model="vocationalWorkShow"
          custom-class="examine-style"
          width="50%"
        >
          <div class="modifyPassword">
            <el-form
              ref="formPassword"
              class="demo-ruleForm"
              label-width="140px"
              :model="passwordObj"
              :rules="rule"
            >
              <el-form-item label="当前密码" prop="password">
                <el-input  :type="passwordShow" v-model="passwordObj.password"></el-input>
                <img v-if="seeEyeShow" class="seeEye" @click="seeEye()" src="../assets/img/eyes.png" alt="">
                <img v-if="!seeEyeShow" class="seeEye" @click="seeEyes()" src="../assets/img/eye.png" alt="">
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input  :type="passwordShow" v-model="passwordObj.newPassword"></el-input>
                <img v-if="seeEyeShow" class="seeEye" @click="seeEye()" src="../assets/img/eyes.png" alt="">
                <img v-if="!seeEyeShow" class="seeEye" @click="seeEyes()" src="../assets/img/eye.png" alt="">
              </el-form-item>
              <el-form-item label="确认新密码" prop="configNewPassword">
                <el-input  :type="passwordShow" v-model="passwordObj.configNewPassword"></el-input>
                <img v-if="seeEyeShow" class="seeEye" @click="seeEye()" src="../assets/img/eyes.png" alt="">
                <img v-if="!seeEyeShow" class="seeEye" @click="seeEyes()" src="../assets/img/eye.png" alt="">
              </el-form-item>
            </el-form>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="vocationalWorkShow = false">取 消</el-button>
              <el-button type="primary" @click="configPasswordMethods"
                >确 定</el-button
              >
            </span>
          </template>
        </el-dialog>
        <div class="login-btn">
          <el-button type="primary" @click="logoConfig"
            >确定</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {Encrypt} from '../utils/crypto'
export default {
  data() {
    var validatorUser = (rule, value) => {
      return /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^\w\s]).{6,}$/.test(value);
    };
    return {
      passwordShow: "password",
      seeEyeShow: true,
      nextStep: 2,
      vocationalBankShow: false,
      vocationalWorkShow: false,
      fileData: null,
      bankId: '',
      url: "http://120.27.147.47:8080/img/img.146655c9.jpg",
      srcList: ["http://120.27.147.47:8080/img/img.146655c9.jpg"],
      ruleForm: {},
      ruleForms: {
        bankName: '招商银行',
        authBankName: '招商银行',
      },
      passwordObj: {
        password: "",
        newPassword: "",
        configNewPassword: "",
      },
      logoUrl: null,
      rule: {
        password: [
          { required: true, message: "请输入原密码", trigger: "blur" },
          { validator: validatorUser, message: '密码长度至少6位，必须包含字母、数字和特殊字符（?=.*@)' }
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { validator: validatorUser, message: '密码长度至少6位，必须包含字母、数字和特殊字符（?=.*@)' }
        ],
        configNewPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validatorUser, message: '密码长度至少6位，必须包含字母、数字和特殊字符（?=.*@)' }
        ],
      },
      rules: {
        bankNo: [
          { required: true, message: "请输入平台银行账号", trigger: "blur" },
        ],
        bankAdress: [
          { required: true, message: "请输入平台开户地", trigger: "blur" },
        ],
        authBankNo: [
          { required: true, message: "请输入授权方银行账号", trigger: "blur" },
        ],
        authBankAdress: [
          { required: true, message: "请输入授权方开户地", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getSettingInfo();
  },
  methods: {
    seeEye(){
      this.seeEyeShow = false
      this.passwordShow =  "text"
    },
    seeEyes(){
      this.seeEyeShow = true
      this.passwordShow =  "password"
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("submit!");
        } else {
          if (this.nextStep == 1) {
            this.nextStep = 2;
          }
        }
      });
    },
    handleRemove() {
      this.$refs.uploadImage.clearFiles();
    },
    vocationalWork() {
      this.vocationalWorkShow = true;
    },
    vocationalBank() {
      this.vocationalBankShow = true;
      this.$http({
        url: "/api/quick/bank/selectBankParam",
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((data) => {
        // examine
        if (data.code == 0) {
          this.bankId = data.result.id
          if(data.result.id){
            this.ruleForms.bankName = '招商银行'
            this.ruleForms.bankNo = data.result.bankNo
            this.ruleForms.bankAdress = data.result.bankAdress
            this.ruleForms.authBankName = '招商银行'
            this.ruleForms.authBankNo = data.result.authBankNo
            this.ruleForms.authBankAdress = data.result.authBankAdress
          }else {
            this.ruleForms.bankNo = ''
            this.ruleForms.bankAdress = ''
            this.ruleForms.authBankNo = ''
            this.ruleForms.authBankAdress = ''
          }
        }
      });
    },
    getSettingInfo() {
      // 获取个人信息
      this.$http({
        url: "/api/quick/consumer/selectPlatformDetail",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code == 0) {
          this.ruleForm = data.result;
        }
      });
    },
    configBank() {
      // 线上发薪配置
      if(this.bankId == '' || this.bankId == undefined){
        // 新增
        this.$refs.formPasswords.validate((valid) => {
          if (valid) {
            this.$http({
              url: "/api/quick/bank/saveOrUpdate",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                bankNo: this.ruleForms.bankNo,
                bankName: '招商银行',
                bankAdress: this.ruleForms.bankAdress,
                authBankNo: this.ruleForms.authBankNo,
                authBankName: '招商银行',
                authBankAdress: this.ruleForms.authBankAdress,
              },
            }).then((data) => {
              if (data.code == 0) {
                this.setAuthMode()
                this.$message.success("修改成功！");
                this.vocationalBankShow = false
              }
            });
          }
        });
      }else {
        // 更新
        this.$refs.formPasswords.validate((valid) => {
          if (valid) {
            this.$http({
              url: "/api/quick/bank/saveOrUpdate",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                id: this.bankId,
                bankNo: this.ruleForms.bankNo,
                bankName: '招商银行',
                bankAdress: this.ruleForms.bankAdress,
                authBankNo: this.ruleForms.authBankNo,
                authBankName: '招商银行',
                authBankAdress: this.ruleForms.authBankAdress,
              },
            }).then((data) => {
              if (data.code == 0) {
                this.$message.success("修改成功！");
                // this.setAuthMode()
                this.vocationalBankShow = false
              }
            });
          }
        });
      }
    },
    setAuthMode() {
      this.$http({
        url: "/api/quick/bank/setAuthMode",
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then(() => {
        // if (data.code == 0) {
        // }
      });
    },
    configPasswordMethods() {
      // 修改密码
      this.$refs.formPassword.validate((valid) => {
        if (valid) {
          if (
            this.passwordObj.newPassword == this.passwordObj.configNewPassword
          ) {
            let consumerId = JSON.parse(localStorage.getItem("linggong_info")).consumerId
            // this.passwordObj.password = Encrypt(this.passwordObj.password);
            // this.passwordObj.newPassword = Encrypt(this.passwordObj.newPassword);
            this.$http({
              url: "/api/quick/consumer/updatePassword",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                password: Encrypt(this.passwordObj.password),
                newPassword: Encrypt(this.passwordObj.newPassword),
                id: consumerId,
              },
            }).then((data) => {
              if (data.code == 0) {
                this.$message.success("修改成功，请重新登录");
                this.goLogin();
              }
            });
          } else {
            this.$message.error("两次密码输入不一致");
          }
        }
      });
    },
    goLogin() {
      this.$http({
        url: "/api/quick/consumer/doLogout",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code == 0) {
          localStorage.removeItem("bussines_info");
          localStorage.removeItem("bussines_token");
          this.$router.push("/login");
        }
      });
    },
    uploadFileLogo(res) {
      // 上传头像
      let formData = new FormData();
      formData.append("file", res.file);
      this.$http({
        url: "/api/quick/oss/uploadBySingle",
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        data: formData,
      }).then((data) => {
        if (data.code == 0) {
          this.ruleForm.logoUrl = data.result;
        }
      });
    },
    logoConfig() {
      // 修改头像
      this.$http({
        url: "/api/quick/consumer/updatePlatformLogo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.ruleForm.logoUrl
      }).then((data) => {
        if (data.code == 0) {
          location.reload()
        }
      });
    },
  },
};
</script>
<style scoped>
html,
body {
  overflow: inherit;
}
.register {
  width: 100%;
  background: #eef4fb;
  float: left;
  height: 100%;
}
.registerCon {
  width: 100%;
  float: left;
  margin: 0 0 50px;
  background: #fff;
  box-shadow: 0px 4px 6px 0px #e1efff;
}
.login-btn {
  text-align: center;
  margin: 60px 0 30px -150px;
}
.login-btn button {
  width: 90px;
  height: 40px;
}
.registerCon p {
  font-size: 14px;
  color: #0a2e6a;
  border-bottom: 1px solid #eef4fb;
  padding: 30px 0;
  margin: 0 0 30px 60px;
}
.upload-images {
  position: relative;
  width: 80px;
}
.upload-images-icon {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: all 0.2s;
}
.upload-images:hover .upload-images-icon {
  opacity: 1;
}
.seeEye {
  position: absolute;
  width: 20px;
  right: 50px;
  top: 12px;
  cursor: pointer;
}
</style>

